<!-- ChatBox.vue -->

<template>
    <div class="chat-box">
        <!-- 聊天框内容 -->
        <div class="chat-messages">
            <div v-for="message in messages" :key="message.id" class="chat-message">
                <img :src="message.userAvatar" :alt="message.user" class="user-avatar">
                <div class="chat-innerHTML">
                    <strong style="color:#2b94ff;font-size:14px">{{ message.user }}</strong>
                    <span class="xxxx">{{ message.content }}</span>
                </div>
            </div>
        </div>
        <!-- 输入框和发送按钮 -->
        <div class="input-section">
            <!-- 这里放置你的输入框和按钮的Vue绑定 -->
            <div style="display: flex;">
                <div class="editArea"
                    style="width: 100%;max-width: 80%;font-size: 14px;overflow-y: auto;background-color: #fff;flex: 3;border-radius: 5px;height: 70px;"
                    name="editArea" contenteditable="true">
                </div>
                <div
                    style="line-height: 1;display: flex;flex-direction: column;background-color: #fff;align-items: center;flex: 1;margin-left: 5px;border-radius: 5px;">

                    <button @click="sendMessage" style="width: 100%;height: 100%;">发 送</button>
                </div>
            </div>
            <div class="action" style="width: 100%;">
                <!-- 其他操作按钮等 -->
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'chatBoxPage',
    props: {
        userAvatar: String,
        user: String,
    },
    data() {
        return {
            messages: [],
        };
    },
    methods: {
        embtn() {

        },
        sendMessage() {
            // 处理发送按钮点击事件
            const editArea = this.$el.querySelector('.editArea');
            const messageContent = editArea.textContent.trim();

            if (messageContent !== '') {
                this.messages.push({
                    id: this.messages.length + 1,
                    user: this.user,
                    content: messageContent,
                    userAvatar: this.userAvatar,
                });

                // 清空输入框
                editArea.textContent = '';

                // 滚动到底部以显示最新的消息
                this.$nextTick(() => {
                    const chatMessages = this.$el.querySelector('.chat-messages');
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                });
            }
        },
    },
};
</script>
  
<style scoped>
.chat-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 10px;
    padding: 10px;
    max-width: 400px;
}

.chat-messages {
    overflow-y: auto;
    min-height: 330px;
    max-height: 330px;
    margin-bottom: 10px;
    border: 1px #ccc solid;
    border-radius: 5px;
    overflow: auto;
}

.chat-message {
    display: flex;
    margin-bottom: 10px;
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.chat-innerHTML {
    flex: 1;
}

.input-section {
    display: flex;
    flex-direction: column;
}

.editArea {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 5px;
}

button {
    background-color: #2b94ff;
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
}
</style>